<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<p v-color>我是自定义指令</p>
		<input type="text" v-focus.color="'red'">
	</div>
	<script src="./vue.js"></script>
	<script>
		/*
		自定义指令定义方法：
			全局定义
					Vue.directive("名字",{
						关于指令的钩子和逻辑
					})
					bind:在绑定元素初始渲染时候执行
					inserted:在Dom元素插入到页面时候执行
					update:在更新时候执行
				钩子的参数：
					el:绑定法Dom元素

			局部定义
				在配置对象中写directives


			注意：名字定义时不加v-，使用时候加v-
					
		*/
		Vue.directive('color',{
			inserted(el){
				el.style.color="red"
			}
		})
		var vm = new Vue({
			el:'#app',
			//定义局部指令
			directives:{
				'focus':{
					inserted(el,binding){
						//从binding下面获取是否在修饰符
						var sColor = binding.modifiers.color
						if(sColor){
							var value = binding.value;
							console.log(value)
							el.style.boxShadow = `3px 4px 4px ${value}`
						}
						el.focus();
					}
				}
			}
		})
	</script>
</body>
</html>